<template>
    <div class="announcement-container">
      <!-- 顶部提示条 -->
      <el-alert
        title="温馨提示: 公告管理"
        type="warning"
        :closable="false"
        show-icon
      />
  
      <!-- 公告内容区域 -->
      <div class="content-section">
        <div class="content-label">公告内容</div>
  
        <!-- 展示模式 -->
        <div v-if="!isEditing" class="display-mode">
          <div v-if="noticeValue" class="content-text">
            {{ noticeValue }}
          </div>
          <el-empty v-else description="暂无公告" :image-size="80" />
          
          <div class="action-buttons">
            <el-button type="primary" @click="handleEdit">编辑公告</el-button>
          </div>
        </div>
  
        <!-- 编辑模式 -->
        <div v-else class="edit-mode">
          <el-input
            v-model="noticeInputValue"
            type="textarea"
            :rows="6"
            placeholder="请输入公告内容..."
            maxlength="500"
            show-word-limit
            resize="none"
          />
          <div class="action-buttons">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">保 存</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { notice, noticeSet } from '@/api/notice';
  // --- 状态管理 ---
  
  // 是否处于编辑模式
  const isEditing = ref(false);
  
  // 当前的公告内容 (在实际项目中, 这个值应该从API获取)
  const noticeValue = ref(''); 
  // 示例: const noticeValue = ref('尊敬的用户：\n为了提供更优质的服务，我们将于今晚23:00至次日凌晨2:00进行系统维护，届时部分功能可能无法使用。给您带来的不便，敬请谅解！');
  
  // 编辑时使用的临时公告内容
  const noticeInputValue = ref('');
  
  const getNotice = async () => {
    const res = await notice();
    noticeValue.value = res.content;
  }
  onMounted(() => {
    getNotice();
  })
  // --- 方法 ---
  
  /**
   * @description: 进入编辑模式
   */
  const handleEdit = () => {
    // 将当前公告内容同步到临时变量
    noticeInputValue.value = noticeValue.value;
    isEditing.value = true;
  };
  
  /**
   * @description: 保存公告内容
   */
  const handleSave = async () => {
    // 在实际项目中, 这里应该调用API将 noticeInputValue.value 发送到后端
    // --- MOCK API Call ---
    console.log('正在保存公告:', noticeInputValue.value);
    // --- MOCK End ---
    await noticeSet({content: noticeInputValue.value});
    
    // 更新正式的公告内容
    // noticeValue.value = noticeInputValue.value;
    
    // 退出编辑模式
    isEditing.value = false;
    
    // 弹出成功提示
    ElMessage({
      message: '公告保存成功！',
      type: 'success',
    });
    getNotice();
  };
  
  /**
   * @description: 取消编辑
   */
  const handleCancel = () => {
    // 直接退出编辑模式，不保存任何修改
    isEditing.value = false;
  };
  </script>
  
  <style scoped>
  /* 整体容器，模仿图片中的白色卡片样式 */
  .announcement-container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    max-width: 800px; /* 限制最大宽度，使其在宽屏上更好看 */
    margin: 20px auto; /* 居中显示 */
  }
  
  /* 顶部提示条的样式微调 */
  .el-alert {
    background-color: #fdf6ec; /* 匹配图片中的淡黄色 */
    color: #E6A23C;
  }
  
  .content-section {
    margin-top: 24px;
  }
  
  /* “公告内容”标签样式 */
  .content-label {
    color: #303133;
    font-weight: 500;
    margin-bottom: 16px;
    font-size: 16px;
  }
  
  /* 展示模式下的公告文本样式 */
  .content-text {
    min-height: 100px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    color: #606266;
    line-height: 1.6;
    white-space: pre-wrap; /* 关键：保留换行和空格 */
    font-size: 14px;
  }
  
  /* 操作按钮区域 */
  .action-buttons {
    margin-top: 20px;
    text-align: right;
  }
  
  /* 按钮之间的间距 */
  .action-buttons .el-button + .el-button {
    margin-left: 10px;
  }
  
  /* 解决 el-empty 默认上下外边距过大的问题 */
  .display-mode .el-empty {
    padding: 20px 0;
  }
  </style>